import 'dart:math';
import 'package:common_utils/common_utils.dart';
import 'package:get/get.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:part_time_job_pro/common/routers/names.dart';
import 'package:part_time_job_pro/common/style/color.dart';
import 'package:part_time_job_pro/common/style/theme.dart';
import 'package:part_time_job_pro/common/values/images.dart';
import 'package:part_time_job_pro/common/widgets/rectangle_check_box.dart';
import 'package:part_time_job_pro/pages/forget/view.dart';
import 'package:part_time_job_pro/pages/login/logic.dart';

//会员登录界面
class LoginPage extends GetView<LoginLogic> {
  LoginPage({Key? key}) : super(key: key);

  //路由地址
  static const String routeName = "/login";
  final logic = Get.find<LoginLogic>();
  final state = Get.find<LoginLogic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginLogic>(builder: (logic) {
      return SingleChildScrollView(
          child: Container(
        height: 1.sh,
        color: AppColor.norWhite01Color,
        padding: EdgeInsets.only(left: 35.r, top: 75.r, right: 35.r),
        child: Column(
          children: [
            Center(
              child: Image.asset(
                AssetsImages.appLogo,
                width: 90.r,
                height: 90.r,
              ),
            ),
            SizedBox(height: 15.r),
            Text(
              "(企业版只要用于发布和管理岗位)",
              style: TextStyle(color: AppColor.norGrayColor, fontSize: 14.r),
            ),
            SizedBox(height: 15.r),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  state.loginTypeIsMessage ? "验证码登录" : "密码登录",
                  textAlign: TextAlign.start,
                  style: AppTheme.seledLoginType,
                ),
                GestureDetector(
                    onTap: () {
                      logic.changeLoginType();
                    },
                    child: Text(
                      state.loginTypeIsMessage ? "用账号密码登录" : "切换为验证码登录",
                      textAlign: TextAlign.start,
                      style: AppTheme.normalLoginType,
                    )),
              ],
            ),
            buildLoginAccount(),
            state.loginTypeIsMessage
                ? buildMobileVerifyCode()
                : buildLoginPassowrd(),
            buildRemeberPassword(),
            buildLoginButton(),
            buildLoginAgreement()
          ],
        ),
      ));
    });
  }

  //登录账号
  Widget buildLoginAccount() {
    return Container(
        padding: EdgeInsets.fromLTRB(0, 20.r, 0, 20.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 45.r,
                  child: Text(state.loginTypeIsMessage ? "手机号" : "账号",
                      style: TextStyle(
                        color: AppColor.norGray02Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.userNameFocusNode,
                    autofocus: false,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateUserName(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.userNameTextEditController,
                    decoration: InputDecoration(
                        hintText: "请输入登录账号",
                        border: InputBorder.none,
                        suffixIcon: state.userNameText.isNotEmpty &&
                                logic.userNameFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearUserName();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                ))
              ]),
            )
          ],
        ));
  }

  //手机验证码
  Widget buildMobileVerifyCode() {
    return Container(
        padding: EdgeInsets.fromLTRB(0, 20.r, 0, 20.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 45.r,
                  child: Text("验证码",
                      style: TextStyle(
                        color: AppColor.norGray02Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.verifyCodeFocusNode,
                    autofocus: false,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateVerifyText(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.verifyPasswordTextFieldController,
                    decoration: InputDecoration(
                        hintText: "请输入短信验证码",
                        border: InputBorder.none,
                        suffixIcon: state.verifyText.isNotEmpty &&
                                logic.verifyCodeFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearVerifyCode();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                GestureDetector(
                    onTap: () {
                      if (state.codeSeconds == 0) {
                        LogUtil.e("发送验证码");
                        logic.getSmsCode();
                      } else {
                        LogUtil.e("请勿频繁操作!");
                      }
                    },
                    child: Container(
                      alignment: Alignment.centerRight,
                      width: 80.r,
                      child: Text(
                          state.codeSeconds > 0
                              ? "${state.codeSeconds}s"
                              : "获取验证码",
                          style: TextStyle(
                            color: AppColor.norYellow03Colors,
                            fontSize: 14.sp,
                          )),
                    )),
              ]),
            )
          ],
        ));
  }

  //登录密码
  Widget buildLoginPassowrd() {
    return Container(
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 40.r,
                  child: Text("密码",
                      style: TextStyle(
                        color: AppColor.norGray02Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.passwordFocusNode,
                    autofocus: false,
                    obscureText: state.isObscure,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updatePassword(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.passwordTextFieldController,
                    decoration: InputDecoration(
                        hintText: "6-20位数字或字母",
                        border: InputBorder.none,
                        suffixIcon: state.passwordText.isNotEmpty &&
                                logic.passwordFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearPassword();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                Container(
                  alignment: Alignment.centerLeft,
                  child: IconButton(
                      color: AppColor.norMainThemeColors,
                      onPressed: () {
                        logic.updateIsObscure();
                      },
                      icon: Icon(state.isObscure
                          ? Icons.visibility
                          : Icons.visibility_off)),
                ),
              ]),
            )
          ],
        ));
  }

  //记住&忘记密码
  Widget buildRemeberPassword() {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 20.r, 0, 20.r),
      color: AppColor.norWhite01Color,
      width: 1.sw,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          state.loginTypeIsMessage
              ? GestureDetector(
                  onTap: () {
                    Get.toNamed(AppRoutes.userRegister);
                  },
                  child: Text(
                    "注册账号",
                    style: TextStyle(
                        color: AppColor.norMainThemeColors,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.normal),
                  ))
              : Row(
                  children: [
                    RectangleCheckBox(
                        size: 16.sp,
                        isChecked: state.isRemeberMe,
                        animationDuration: const Duration(milliseconds: 300),
                        checkedColor: AppColor.norYellow02Colors,
                        borderColor: state.isRemeberMe
                            ? AppColor.norYellow02Colors
                            : AppColor.norGrayColor,
                        onTap: (value) {
                          logic.updateRemeberMe();
                        }),
                    SizedBox(
                      width: 10.r,
                    ),
                    GestureDetector(
                        onTap: () {
                          logic.updateRemeberMe();
                        },
                        child: Text(
                          "记住密码",
                          style: TextStyle(
                              color: AppColor.norGray02Color,
                              fontSize: 14.sp,
                              fontWeight: FontWeight.normal),
                        ))
                  ],
                ),
          const Expanded(child: Text("")),
          GestureDetector(
              onTap: () {
                Get.toNamed(ForgetPage.routeName);
              },
              child: Text(
                "忘记密码？",
                style: TextStyle(
                    color: AppColor.norGray02Color,
                    fontSize: 14.sp,
                    fontWeight: FontWeight.normal),
              ))
        ],
      ),
    );
  }

  //登录按钮
  Widget buildLoginButton() {
    return GestureDetector(
        onTap: () {
          logic.clearFocus();
          if (state.loginTypeIsMessage) {
            //验证码登录
            if (logic.checkLoginParam(true)) {
              if (!state.isAgreement) {
                logic.shake();
                EasyLoading.showToast("请先勾选同意用户/隐私协议");
                return;
              }
              logic.loginBySmsCode();
            }
          } else {
            logic.checkLoginParam(false);
            if (logic.checkLoginParam(false)) {
              if (!state.isAgreement) {
                logic.shake();
                EasyLoading.showToast("请先勾选同意用户/隐私协议");
                return;
              }
              //账号密码登录
              logic.loginByAccount();
            }
          }
        },
        child: Container(
          width: 1.sw,
          alignment: Alignment.center,
          margin: EdgeInsets.only(top: 15.r, bottom: 0),
          padding: EdgeInsets.symmetric(vertical: 10.r),
          decoration: BoxDecoration(
              color: AppColor.norYellow04Colors,
              borderRadius: BorderRadius.circular(6)),
          child: Text("登录",
              style:
                  TextStyle(color: AppColor.norWhite01Color, fontSize: 20.sp)),
        ));
  }

  //同意协议
  Widget buildLoginAgreement() {
    return AnimatedBuilder(
        animation: logic.shakeController,
        builder: (context, child) {
          final sineValue =
              sin(state.shakeCount * 2 * pi * logic.shakeController.value);
          return Transform.translate(
            offset: Offset(sineValue * 10, 0),
            child: child,
          );
        },
        child: Container(
          color: AppColor.norWhite01Color,
          width: 1.sw,
          padding: EdgeInsets.symmetric(vertical: 15.r),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GestureDetector(
                //checkbox
                onTap: () {
                  logic.changeIsAgree();
                },
                child: Text.rich(
                  //实现换行
                  TextSpan(
                    children: [
                      WidgetSpan(
                        child: RectangleCheckBox(
                          size: 14.sp,
                          animationDuration: const Duration(milliseconds: 300),
                          checkedColor: AppColor.norYellow02Colors,
                          borderColor: state.isAgreement
                              ? AppColor.norYellow02Colors
                              : AppColor.norGrayColor,
                          isChecked: state.isAgreement,
                          onTap: (value) {
                            logic.changeIsAgree();
                          },
                        ),
                      ),
                      TextSpan(
                        text: " ",
                        style: TextStyle(fontSize: 12.sp),
                      ),
                      TextSpan(
                        text: "我已经阅读同意",
                        style: TextStyle(
                            color: AppColor.norGrayColor, fontSize: 12.sp),
                      ),
                      TextSpan(
                        text: "《",
                        style: TextStyle(
                            color: AppColor.norGrayColor, fontSize: 12.sp),
                      ),
                      TextSpan(
                        text: "用户协议",
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            Get.toNamed(AppRoutes.agreement);
                          },
                        style: TextStyle(
                            color: AppColor.norYellow04Colors, fontSize: 12.sp),
                      ),
                      TextSpan(
                        text: "》和《",
                        style: TextStyle(
                            color: AppColor.norGrayColor, fontSize: 12.sp),
                      ),
                      TextSpan(
                        text: "隐私协议",
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            Get.toNamed(AppRoutes.agreement);
                          },
                        style: TextStyle(
                            color: AppColor.norYellow04Colors, fontSize: 12.sp),
                      ),
                      TextSpan(
                        text: "》",
                        style: TextStyle(
                            color: AppColor.norGrayColor, fontSize: 12.sp),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ));
  }
}
